<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="es">
<head>
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
	       Remove this if you use the .htaccess -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Pampa's Group Video Chat</title>
	<meta name="description" content="">
	<meta name="author" content="PampaSoft">
	
	<!-- Mobile viewport optimized: j.mp/bplateviewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src='resources/js/libs/jquery-1.5.1.min.js'></script>
	<script type="text/javascript"
		src="resources/js/libs/jquery-ui-1.8.14.custom.min.js"></script>
	<!-- TokBox JS file -->
	<script src="http://staging.tokbox.com/v0.91/js/TB.min.js"
		type="text/javascript" charset="utf-8"></script>
	<script src="resources/js/mylibs/groupvideochat.js"
		type="text/javascript" charset="utf-8"></script>
	<!-- CSS: implied media="all" -->
	<link rel="stylesheet" href="resources/css/style.css?v=2">
	<link type="text/css"
		href="resources/css/ui-lightness/jquery-ui-1.8.14.custom.css"
		rel="stylesheet" />
	<!-- Uncomment if you are specifically targeting less enabled mobile browsers
	<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->
	
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			$("input:button, button", "li").button();
			$("input:button, button", "section").button();
			$('#disconnect-btn').hide();
			$('#publish-btn').hide();
			$('#unpublish-btn').hide();
			$('#friends-grid').hide();
			$('#bottom-bar').hide();
			$('#myCamera').draggable();
		});
	</script>
</head>
<body>
	<!-- Here goes the Page Container -->
	<div id="page-container">
		<!-- Here goes the Header -->
		<header>
			<h1>Que Acelga? Group VideoChat</h1>
			<h3>Hello Start Talking</h3>
			<nav id="nav" >
				<ul>
					<li><a>How it works</a></li>
					<li><a>Contact us</a></li>
					<li id="toggleDevicePanelLink" onclick="javascript:toggleDevicePanelDialog();"><a>Configure Camera/Mic</a></li>
					<li onclick="javascript: launchDialogById('formDialog','Service Status');" ><a>Service Status</a></li>
				</ul>
			</nav>
		</header>
		<div id="content">
		<article>
			<section id="intro">
				<img src="http://placehold.it/200x200" style="float:left;">
				<div id="intro-description">
					<h2>Bienvenido a Que Acelga? Group VideoChat</h2>
					<p>Es un servicio de VideoChat basado en el API the OpenTok.
						Ofrece la capacidad de comunicarse con un grupo mediante la webcam y
						el microfono a través del navegador.</p>
					<p>Antes de comenzar, por favor comprueba que tu webcam y/o
						microfono funcionen correctamente desde el menú.</p>
					<p>Para comenzar a chatear con tu grupo de amigos, simplemente
						crea una nueva sala de conferencias e invita a tus amigos. Si tus
						amigos ya te invitaron a una sala, solo te resta pedir una
						contraseña y ya estás adentro!</p>
					<p style="display:none;">..... is a videochat service based on the OpenTok API. It
						offers group videochat capabilities based on its Flash plugin-based
						client.</p>
					<p style="display:none;">To start chatting, just request a new SessionId and share it
						with your friends. If your friends already shared a SessionId with
						you, then enter it in the form on the left and request for a userId
						(a.k.a. User Token) and you're ready to start communicating. You can
						configure your camera/mic settings from de top menu or you can also
						check for the service's status. You can add up to 50 friends
						(including you) to the group chat.</p>
					<input type="button" value="Abrir una Sala" onclick="javascript: createNewRoom();"/>
					<input type="button" value="Entrar a una Sala" onclick="javascript: enterRoom();"/>
				</div>
			</section>
			<!-- <section id="session-form">
			</section> -->
			<section id="friends-grid">
				<h2> Participantes en la Sala </h2>
				<h4> Para ver mas de cerca a un participante, clickea en su video </h4>
				<!-- My Camera to publish -->
				<div id="myCamera" draggable="true">
					<div id="devicePanelContainer">
						<div id="devicePanelBackground">
							<div id="devicePanelInset"></div>
						</div>
					</div>
				</div>
				<!-- Friends Cameras displayed when connected to session -->
				<div id="subscribers"></div>
			</section>
			<section id="contact">
			</section>
		</article>
		</div>
		<footer></footer>
		<div id="statusDialog">
			<label>Amigos en la Sala: </label><div id="friends-connected"></div>
			<label>Cámara: </label><div id="myCamera-status"></div>
			<label>Micrófono: </label><div id="myMic-status"></div>
			<label>ID de Sala: </label><div id="session-id-status"></div>
		</div>
		<div id="formDialog">
		<form:form id="request-form" modelAttribute="pampaForm">
			<!-- <h2>Nueva Sala</h2> -->
			<ul id="input-list">
				<li>
					<label for="session-id">ID de Sala</label>
					<form:input type="text" id="session-id" path="session_id" value=""/>
				</li>
				<li>
					<label for="pass">Contraseña</label>
					<form:input type="text" id="pass-token" path="session_token" value=""/>
				</li>
				</ul>
				<ul id="submit-list">
				<li>
				<div id="form-status"></div>
				</li>
				<li>
					<input id="req-id-btn" type="button" value="Join/Create New Session" onclick="javascript: createNewSession();"/>
					<input id="check-available-btn" type="button" value="Get Password/Token" onclick="javascript: requestTokenBySessionId(sessionId);"/>
				</li>
				<li>
					<div id="status-logger"></div>
				</li>
			</ul>
		</form:form>
	</div>
	</div>
	<nav id="bottom-bar" style="height:">
			<ul> 
				<li id="connect-btn" onclick="javascript: connect();"><a>Conectar</a></li>
				<li id="disconnect-btn" onclick="javascript: disconnect();"><a>Desconectar</a></li>
				<li id="publish-btn" onclick="javascript: startPublishing();"><a>Activar mi audio/video</a></li>
				<li id="unpublish-btn" onclick="javascript: stopPublishing();"><a>Desactivar mi audio/video</a></li>
			</ul>
		</nav>
	<!--[if lt IE 7 ]>
	    <script src="js/libs/dd_belatedpng.js"></script>
	    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
	<![endif]-->
</body>
</html>